<template>

  <el-container>
    <!--左侧-->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          :default-active="currentRouterPath"
          text-color="#fff"
          style="border-right: solid 0px;"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :unique-opened="true"
      >
        <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">
          <template #title>
            <el-icon><component :is="menuPermission.icon"></component></el-icon>
            <span> {{menuPermission.name}} </span>
          </template>
          <el-menu-item v-for="subPermission in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">
            <el-icon><component :is="subPermission.icon"></component></el-icon>
            {{subPermission.name}}
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>


    <el-container class="rightContent">
      <!--上侧-->
      <el-header>
        <!--菜单收拉图标-->
        <el-icon class="show" @click="showMenu"><Fold /></el-icon>
        <!--用户隐藏式菜单-->
        <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          <el-avatar :src="imageUrl" />
          <span class="user-name">{{ user.name }}</span>
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-header>

      <!--中间-->
      <el-main>
        <!--利用子路由，只改变中间页面的内容-->
        <router-view v-if="isRouterAlive"/>
      </el-main>

      <!--下侧-->
      <el-footer>Love_ovo 动力云客系统开发</el-footer>
    </el-container>
  </el-container>

</template>

<script setup> //vue3 写法
import {nextTick, onMounted, provide, ref} from "vue";
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";
import {useRoute} from "vue-router";

let route = useRoute();

//用户头像rul
let imageUrl = ref();

//右边菜单默认打开哪个菜单
let currentRouterPath = ref();

//菜单false==折叠
let isCollapse = ref(false);
const user = ref({});
let isRouterAlive = ref(true);

//左侧菜单左右展开和折叠
function showMenu(){
  isCollapse.value = !(isCollapse.value)
}

onMounted(() => {
  loadLoginUser();
  loadCurrentRouterPath();
  loadLoginImage();
})

//刷新页面
const reload = async () => {
  isRouterAlive.value = false; //右侧内容隐藏
  await nextTick();
  isRouterAlive.value = true;
}

//父组件推方法|变量
//注意 provide的方法需要在provide之前定义好
provide("reload",reload);
provide("loadUser",user);

//获取用户头像
const loadLoginImage = () => {
  doGet("/api/userImage",{}).then((resp)=>{
    console.log(resp);
    if(resp.data.code === 200){
      imageUrl.value = resp.data.data;
    }
  })
}
//获取登录者信息
function loadLoginUser(){
  console.log("获取登录者信息");
  doGet("/api/login/info",{}).then( (resp) => {
    console.log(resp);
    user.value = resp.data.data;
  })
}

function loadCurrentRouterPath(){
  let arr = route.path.split("/");
  if(arr.length > 3){
    currentRouterPath.value = "/" + arr[1] + "/" + arr[2];
  }else{
    currentRouterPath.value = route.path;
  }
}

//退出登录 退出成功时需要删除token
function logout(){
  doGet("/api/logout",{}).then( (resp) => {
    if(resp.data.code === 200){
      messageTip("退出成功","success");
      removeToken();
      window.location.href = "/";
    } else{
      messageConfirm("退出异常，是否要强制退出").then(()=>{
        //既然后端验证token未通过，那么前端的token肯定是有问题的，那没必要存储在浏览器中，直接删除一下
        removeToken();
        //跳到登录页
        window.location.href = "/";
      }).catch(()=>{
        messageTip("取消强制退出", "warning");
      })
    }
  })
}

</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
}
.el-header {
  background: azure;
  height: 50px;
  line-height: 35px;
}
.el-footer {
  background: aliceblue;
  height: 35px;
  line-height: 35px;
  text-align: center;
}
.rightContent {
  height: calc(100vh);
}
.menuTitle {
  height: 40px;
  line-height: 35px;
  color: #f9f9f9;
  text-align: center;
}
.show {
  cursor: pointer;
}
.el-dropdown {
  float: right;
  line-height: 35px;
}
</style>